<template>
  <div class="board-card">
    <van-list v-model="loading" :finished="finished" finished-text="我是有底线的~" @load="onLoad">
      <div @click="goBusiness(item.b_id)" class="item-card" v-for="(item, b_id) in business_data" :key="b_id">
        <!-- 评分 -->
        <div class="star">
          <img src="../assets/img/jiyang/star.png" alt="" />
          <span class="score">{{ item.b_socre }}</span>
        </div>
        <!-- 图片 -->
        <img :src="item.b_img" alt="" />

        <!-- 第二部分 -->

        <div class="zdy-home">
          <div class="home-name">
            <span>{{ item.b_name }}</span>
            <img src="../assets/img/jiyang/renzheng.png" alt="" />
          </div>

          <span class="city-name">{{ item.b_city }}</span>
        </div>

        <!-- 第三部分 -->
        <div class="icon-price">
          <span class="btn">{{ item.b_feature }}</span>
          <span class="day-price">￥{{ item.b_price }}/天</span>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      business_data: [], //用于存储请求到的商家数据
      pageNum: 0, //用于limit查询 从第一个元素开始查询
      pageSize: 5, //每次查询5个
      // List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。
      loading: false,
      finished: false,
    };
  },

  methods: {
    onLoad() {
      const url = 'v1/bus/select';
      let params = `pageNum=${this.pageNum}&&pageSize=${this.pageSize}`;
      this.axios.post(url, params).then(res => {
        if (res.data.code == 201) {
          this.finished = true;
        }
        console.log(res);
        this.business_data.push(...res.data.data);
        this.pageNum += 5;
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
      });
    },

    goBusiness(b_id) {
      console.log(b_id);
      this.$router.push('/business/' + b_id);
    },
  },
};
</script>
<style lang="scss" scoped>
.board-card {
  background-color: #f2f2f2;
  overflow: hidden;
  .item-card {
    box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.2), 0 0.6rem 2rem 0 rgba(0, 0, 0, 0.19);
    background-color: white;
    width: 90%;
    height: 30rem;
    margin: 2rem auto;
    border-radius: 0.5rem;
    position: relative;
    .star {
      position: absolute;
      top: 1.5rem;
      left: 2rem;
      display: flex;
      width: 6rem;
      height: 2.5rem;
      background-color: white;
      border-radius: 0.5rem;
      justify-content: center;
      align-items: center;
      span {
        padding-left: 0.5rem;
        font-size: 1.6rem;
        font-weight: bold;
        // font-family: "方正粗黑宋简体";
        display: block;
      }
      img {
        width: 1.6rem;
        display: block;
      }
    }
    img {
      width: 100%;
      height: 60%;
      //裁减掉多余部分,不拉伸 不失真
      object-fit: cover;
      border-top-left-radius: 0.5rem;
      border-top-right-radius: 0.5rem;
    }

    .zdy-home {
      width: 94%;
      margin: auto;
      display: block;
      height: 6rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .home-name {
        width: 25rem;
        display: flex;
        align-items: center;

        span {
          font-size: 2rem;
          font-weight: bold;
          display: block;
        }
        img {
          display: block;
          width: 2rem;
          height: 2rem;
        }
      }
      .city-name {
        display: block;
        color: #b6b4c0;
      }
    }
    .icon-price {
      margin: 1rem auto;
      width: 94%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        display: block;
      }
      .btn {
        border-radius: 0.6rem;
        padding: 0.7rem;
        background-color: #efedfd;
        color: #8d73ec;
      }
    }
  }
}
</style>
